<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楼层滚动案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 2500px;
        }
        div{
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
        ul{
            cursor: pointer;
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            right: 80px;
            line-height: 30px;
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>一楼</h1>
    <div></div>
    <h1>二楼</h1>
    <div></div>
    <h1>三楼</h1>
    <div></div>
    <h1>四楼</h1>
    <div></div>
    <h1>五楼</h1>
    <div></div>
    <h1>六楼</h1>
    <div></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        let lis = document.querySelectorAll('li')
        let floor = document.querySelectorAll('h1')
        let timerId = null
        lis.forEach((li,index)=>{
            li.onclick=()=>{
                timerId = null
                timerId=setInterval(()=>{
                    let height = floor[index].offsetTop
                    if(height>=document.documentElement.scrollTop){
                        document.documentElement.scrollTop += 30
                        if(height<=document.documentElement.scrollTop){
                            document.documentElement.scrollTop = height
                            clearInterval(timerId)
                        }
                    }else{
                        document.documentElement.scrollTop -= 30
                        if(height>=document.documentElement.scrollTop){
                            document.documentElement.scrollTop = height
                            clearInterval(timerId)
                        }
                    }
                },10)
            }
        })
    </script>
</body>
</html>